import { FORM_LAYOUT } from '@/common/constants';
import { queryClassListByName } from '@/services/ThesisManage/myThesis/ThesisController';
import { storage } from '@/utils/Storage';
import ProForm, {
  ProFormSelect,
  ProFormText,
  ProFormUploadButton,
} from '@ant-design/pro-form';
import { message } from 'antd';
import { useEffect, useState } from 'react';

const ThesisForm = (props) => {
  const { modalFormRef, cItem } = props;
  const token = storage.get('token');
  const [selectOptions, setSelectOptions] = useState([]);
  const [loading, setLoading] = useState(false);
  const [url, setURL] = useState('');
  const handleChange = (info) => {
    if (info.file.status === 'uploading') {
      setLoading(true);
      return;
    }
    if (info.file.status === 'done') {
      setURL(info.file.response);
    }
  };

  useEffect(() => {
    modalFormRef?.current?.setFieldsValue(cItem);
    getClassList();
  }, [cItem]);
  const uploadProps = {
    name: 'file',
    headers: {
      Authorization: `Bearer ${token}`,
    },
    accept: '.doc,.docx',
    // showUploadList: false,
    beforeUpload: (file) => {
      console.log(file);
      const filename = file.name;
      const index = filename.lastIndexOf('.');
      const fileType = filename.substring(index);
      // console.log('fileType----------',fileType)
      if (['.doc', '.docx'].indexOf(fileType) === -1) {
        message.error(`请上传word文件!`);
        return false;
      } else if (file.size > 1024 * 1024 * 20) {
        message.error(`上传附件的大小不能超过20MB`);
        return false;
      }
      return true;
    },
  };

  const getClassList = async () => {
    const userInfo = storage.get('userInfo');
    const class_name = userInfo?.class?.[0]?.class_name;
    const res = await queryClassListByName(class_name);
    const newList = res?.data?.teacher?.map((value) => {
      return { label: value.name, value: value.id };
    });
    console.log(newList);
    setSelectOptions(newList);
  };

  return (
    <ProForm
      formRef={modalFormRef}
      style={{ marginTop: 24 }}
      layout="horizontal"
      submitter={false}
      {...FORM_LAYOUT}
    >
      <ProFormText
        width="md"
        name="thesis_name"
        label="论文名称"
        placeholder="请输入论文名称"
        rules={[{ required: true, message: '请输入论文名称' }]}
      />
      <ProFormSelect
        width="md"
        name="teacher_id"
        label="指导教师"
        placeholder="请选择指导教师"
        rules={[{ required: true, message: '请选择指导教师' }]}
        options={selectOptions}
      />
      <ProFormUploadButton
        name="file"
        action="/thesisUpload"
        max={1}
        fieldProps={uploadProps}
        width="md"
        accep=".doc,.docx"
        label="论文附件"
        // 以下两条是必须的
        valuePropName="fileList"
        // 如果没有下面这一句会报错
        getValueFromEvent={(e) => {
          if (Array.isArray(e)) {
            return e;
          }
          return e && e.fileList;
        }}
        rules={[{ required: true, message: '请上传论文附件' }]}
        maxCount={1}
      />
    </ProForm>
  );
};

export default ThesisForm;
